<template>
  <div>
    <a-card>
      <footer-button :buttons="buttons" />
      <a-descriptions>
        <template v-for="item in values.detailList" :key="item.key">
          <a-descriptions-item :label="item.label">{{ item.value }}</a-descriptions-item>
        </template>
      </a-descriptions>
      <a-tabs v-model:activeKey="activeKey" :animated="false">
        <a-tab-pane key="1" tab="课程大纲">
          <CourseOutlineDetail :dataList="values.classDetail" />
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script setup>
import {ref, reactive} from "vue";
import CourseOutlineDetail from '../component/course-outline-detail'

const activeKey = ref('1')
const buttons = [
  {
    name: "downloadCourse",
    event: () => downloadCourse(),
    type: "primary",
    code: "",
  },
  {
    name: "updateItem",
    event: () => updateItem(),
    type: "primary",
    code: "",
  },
  {
    name: "inviteUpdateItem",
    event: () => inviteUpdateItem(),
    type: "primary",
    code: "",
  },
]

const values = reactive({
  detailList: [
    {
      key: 'name',
      label: '课程名称',
      value: '现代经济学'
    },
    {
      key: 'code',
      label: '课程代码',
      value: '3434'
    },
    {
      key: 'type',
      label: '学科类别',
      value: '经济学'
    },
    {
      key: 'course',
      label: '综合评分',
      value: '4.5分'
    },
    {
      key: 'projectName',
      label: '项目名',
      value: '四川大学成都校区项目'
    },
    {
      key: 'semester',
      label: '学期',
      value: '第一学期'
    },
    {
      key: 'professor',
      label: '教授',
      value: '安迪'
    },
    {
      key: 'ta',
      label: 'TA',
      value: '张三'
    },
    {
      key: 'contract',
      label: '项目负责人',
      value: '张三、里斯'
    },
    {
      key: 'number',
      label: '报名人数',
      value: '3432'
    },
    {
      key: 'startTime',
      label: '开课时间',
      value: '2020-06-09'
    },
    {
      key: 'startTime',
      label: '结课时间',
      value: '2020-06-09'
    },
    {
      key: 'preClass',
      label: '前置课',
      value: '简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介'
    },
  ],
  classDetail: [
    {
      key: 'Term',
      label: 'Term',
      value: '描述描述'
    },
    {
      key: 'Location',
      label: 'Location',
      value: '四川大学'
    },
    {
      key: 'Email',
      label: 'Instructor Email',
      value: '15645645@qq.com'
    },
    {
      key: 'Delivery',
      label: 'Mode of Delivery',
      value: 'Delivery'
    },
    {
      key: 'Language',
      label: 'Language of Instruction',
      value: 'ENGLISH'
    },
    {
      key: 'Hours',
      label: 'Contact Hours',
      value: '35'
    },
    {
      key: 'Course',
      label: '学分',
      value: '100'
    },
    {
      key: 'Prerequisites',
      label: 'Course Prerequisites',
      value: '描述描述'
    },
  ]
})

const downloadCourse = () => {
  console.log('下载')
}

const updateItem = () => {
  console.log('修改')
}

const inviteUpdateItem = () => {
  console.log('邀请修改')
}
</script>

<style scoped>

</style>
